<script setup lang="ts">
// ==================== 类型定义 ====================
// 领取状态枚举
enum CardState {
  CanNotClaim = 0, // 不能领取
  CanClaim = 1, // 可以领取
  Claimed = 2, // 已领取
}

// 奖励类型枚举
enum RewardType {
  Big = 1, // 大奖
  Small = 2, // 小奖
}
/**
 * 卡片接口定义
 */
interface Card {
  state: CardState // 领取状态,0=>不能领取,1=>可以领取,2=>领了
  bonus: string // 奖励金额
  showShadow: boolean // 是否显示金色边框
  is_today: boolean // 是否是今天该领取
  disable: boolean // 是否禁用
  reward_type: RewardType // 奖励类型 1是大奖 2是小奖
  showGif: boolean // 是否显示gif
  imgSrc: string // 默认图片
  gifSrc: string // gif图片
  resSrc: string // 领取后图片
}

// ==================== 响应式数据 ====================
// 活动数据
const activityData = ref<any>({})

// 任务进度数据
const tasks: any = reactive([
  // 任务1：累计充值任务
  {
    description: $t('activity.my_sterycard.task_recharge_total'), // 任务描述：累计充值
    current: 0, // 当前进度
    target: 0, // 目标进度
    percent: 0, // 完成百分比
  },
  // 任务2：当日充值任务
  {
    description: $t('activity.my_sterycard.task_recharge_same_day'), // 任务描述：当日充值
    current: 0, // 当前进度
    target: 0, // 目标进度
    percent: 0, // 完成百分比
  },
])

// 结果弹窗属性
const resultProps = reactive({
  show: false, // 是否显示结果弹窗
  bonus: '0', // 奖励金额，默认为0
})

// 默认卡片状态
const defaultCards = reactive(Array.from({ length: 9 }).fill({}).map(() => ({
  state: CardState.CanNotClaim, // 默认状态：不可领取
  reward_type: RewardType.Small, // 默认奖励类型：小奖
  bonus: '0', // 默认奖励金额为0
  disable: true, // 默认禁用
  imgSrc: '/images/activity/my-sterycard/small.png', // 默认图片路径
  gifSrc: '/images/activity/my-sterycard/small.gif', // 默认gif图片路径
  resSrc: '/images/activity/my-sterycard/Card_Win_Blue.png', // 默认领取后图片路径
})))

// ==================== 计算属性 ====================
/**
 * 计算最大奖励金额
 */
const maxBonus = computed(() => {
  // 存储所有卡片的奖励金额
  const bonus: number[] = []
  // 遍历卡片，将每张卡片的奖励金额（转为数字）加入数组
  activityData.value.cards?.forEach((item: Card) => {
    bonus.push(Number(item.bonus) || 0)
  })
  // 如果没有奖励金额，返回0
  if (!bonus.length) {
    return 0
  }
  // 返回所有卡片奖励中的最大值
  return Math.max(...bonus)
})

// ==================== 核心业务方法 ====================
/**
 * 初始化活动配置
 * 获取活动详情信息
 */
function initConfig() {
  apo.activity.getActivityDetailInfo(46, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }
    activityData.value = data
    initData()
  })
}

/**
 * 初始化卡片数据
 * 设置卡片状态、图片和禁用状态
 */
function initData() {
  if (activityData.value.cards?.length) {
    let startDisabled = false
    activityData.value.cards.forEach((card: Card) => {
      card.showGif = false

      // 设置禁用状态 今天之后的卡牌都属于禁用
      card.disable = false
      if (startDisabled) {
        card.disable = true
      }
      if (card.is_today) {
        startDisabled = true
      }

      // 如果是今日卡片且状态为可领取或已领取，则显示金色边框
      if (card.is_today && [CardState.CanClaim, CardState.Claimed].includes(card.state)) {
        card.showShadow = true
      }

      // 根据奖励类型，设置不同图片
      if (card.reward_type === RewardType.Big) {
        card.gifSrc = '/images/activity/my-sterycard/big.gif'
        card.imgSrc = '/images/activity/my-sterycard/big.png'
        card.resSrc = '/images/activity/my-sterycard/Card_Win_Red.png'
      }
      if (card.reward_type === RewardType.Small) {
        card.gifSrc = '/images/activity/my-sterycard/small.gif'
        card.imgSrc = '/images/activity/my-sterycard/small.png'
        card.resSrc = '/images/activity/my-sterycard/Card_Win_Blue.png'
      }
    })
  }

  // 设置任务进度
  updateTaskProgress()
}

/**
 * 更新任务进度
 */
function updateTaskProgress() {
  // 总充值任务进度
  tasks[0].current = activityData.value.total_recharge || 0
  tasks[0].target = activityData.value.total_recharge_cond || 0
  tasks[0].percent = (tasks[0].current / tasks[0].target) * 100 || 0
  if (tasks[0].percent > 100) {
    tasks[0].percent = 100
  }

  // 当日充值任务进度
  tasks[1].current = activityData.value.today_recharge || 0
  tasks[1].target = activityData.value.today_recharge_cond || 0
  tasks[1].percent = (tasks[1].current / tasks[1].target) * 100 || 0
  if (tasks[1].percent > 100) {
    tasks[1].percent = 100
  }
}

// ==================== 用户交互方法 ====================
/**
 * 处理卡片点击事件
 * @param card 被点击的卡片
 */
function handleCardClick(card: any) {
  // 若卡片已禁用或已领取，则不可点击，直接返回
  if (card.disable || card.state === CardState.Claimed) {
    return
  }

  // 若任务未完成，则提示用户并终止后续操作
  if (card.state === CardState.CanNotClaim) {
    apo.toast.showFail($t('activity.my_sterycard.card_error'))
    return
  }

  // 展示动画效果
  card.showGif = true
  // timeout 控制动画时长，httpout 控制接口回调
  let timeout = true
  let httpout = true

  // 900ms 后关闭动画（如果接口已返回则直接关闭，否则等待接口回调）
  setTimeout(() => {
    timeout = false
    stopAnimation(card, timeout, httpout)
  }, 900)

  // 调用领取奖励接口
  apo.activity.claimActivityReward(46, (error: any) => {
    if (error) {
      // 领取失败，关闭动画并记录错误
      card.showGif = false
      apo.logger.error('claimActivityReward error:', error)
      return
    }
    // 领取成功，关闭动画（如果动画已到时则直接关闭，否则等待动画结束）
    httpout = false
    stopAnimation(card, timeout, httpout)
  })
}

/**
 * 停止卡片动画并展示奖励弹窗
 * @param card 当前操作的卡片对象
 * @param timeout 动画定时器是否还在
 * @param httpout 接口回调是否还未返回
 */
async function stopAnimation(card: Card, timeout: boolean, httpout: boolean) {
  // 如果动画未结束或接口未返回，则不执行后续操作
  if (timeout || httpout) {
    return
  }
  // 展示奖励弹窗
  resultProps.show = true
  // 设置弹窗奖励金额
  resultProps.bonus = card.bonus

  // 设置卡片状态为已领取
  card.state = CardState.Claimed
  // 关闭动画效果
  card.showGif = false
}

// ==================== 生命周期钩子 ====================
/**
 * 组件激活时初始化
 */
onActivated(() => {
  initConfig()
})
</script>

<template>
  <!-- 神秘卡片活动主容器 -->
  <div class="MysteryCard">
    <!-- 活动标题区域 -->
    <div class="title">
      {{ $t('activity.my_sterycard.title_win_up_to') }}
      <span>
        {{ apo.utils.formateAmountWithSymbol(maxBonus) }}
        <!-- 100%标签 -->
        <div class="float-percent-box">
          <span class="float-percent">100%</span>
          <svg class="float-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 39" fill="none">
            <path d="M24 29.25C20 29.25 18.3333 35.75 18 39C15.6 37.05 14.3333 31.6875 14 29.25H12C5.37258 29.25 8.45614e-08 23.8774 0 17.25V12C0 5.37258 5.37258 6.44258e-08 12 0H100C106.627 5.15406e-07 112 5.37258 112 12V17.25C112 23.8774 106.627 29.25 100 29.25H24Z" fill="url(#paint0_linear_1126_164)" />
            <defs>
              <linearGradient id="paint0_linear_1126_164" x1="0" y1="19.5" x2="84" y2="19.5" gradientUnits="userSpaceOnUse">
                <stop stop-color="#DA05F2" />
                <stop offset="1" stop-color="#FD5B0C" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </span>
      {{ $t('activity.my_sterycard.title_with_cards') }}
    </div>

    <!-- 卡片游戏区域 -->
    <div class="card-game">
      <div
        v-for="(card, index) in (activityData.cards || defaultCards)"
        :key="index"
        class="card"
        :class="[{ disabled: card.disable, active: card.showShadow }]"
        @click="handleCardClick(card)"
      >
        <!-- 已领取状态图片 -->
        <div v-if="card.state === CardState.Claimed" class="img img-res">
          <img :src="card.resSrc">
          <span>{{ card.bonus }}</span>
        </div>

        <!-- GIF动画图片 -->
        <div v-else-if="card.showGif" class="img img-gif">
          <NuxtImg :src="card.gifSrc" />
        </div>

        <!-- 基础状态图片 -->
        <div v-else class="img img-bs">
          <NuxtImg :src="card.imgSrc" />
        </div>
      </div>
    </div>

    <!-- 任务进度区域 -->
    <div class="tarefa">
      <p class="tit">
        {{ $t('activity.my_sterycard.task_title') }}
      </p>

      <!-- 任务进度条列表 -->
      <div
        v-for="(task, index) in tasks"
        :key="index"
        class="el-progress el-progress--line el-progress--without-text el-progress_box"
        role="progressbar"
        :aria-valuenow="task.current"
        aria-valuemin="0"
        :aria-valuemax="task.target"
      >
        <div class="el-progress-bar">
          <!-- 进度条外层 -->
          <div class="el-progress-bar__outer">
            <!-- 进度条内层 -->
            <div
              class="el-progress-bar__inner"
              :style="{
                width: `${task.percent}%`,
                animationDuration: '3s',
                backgroundColor: 'rgb(4, 51, 20)',
              }"
            />
          </div>

          <!-- 任务描述和进度文本 -->
          <div class="text">
            <p>{{ task.description }}</p>
            <span class="amount">
              ({{ task.current }}/{{ task.target }})
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 规则说明组件 -->
    <RuleBox :content="activityData.desc" />
  </div>

  <!-- 结果弹窗 -->
  <CommonResultDialog
    :show="resultProps.show"
    :title="$t('activity.common.voce_venceu')"
    :desc="$t('activity.common.voce_venceu_desc')"
    :btn="$t('activity.common.confirmar')"
    :amount="resultProps.bonus"
    icon="/images/activity/common/Coin_Bg 1.png"
    @close="resultProps.show = false"
    @sure="resultProps.show = false"
  />
</template>

<style scoped lang="scss">
// ==================== 主容器样式 ====================
.MysteryCard {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  color: var(--theme-neutral1);
  padding: 0.8rem 0.4rem 0;

  // ==================== 标题区域样式 ====================
  .title {
    text-align: center;
    font-size: var(--font-size6);
    font-weight: 400;

    span {
      font-weight: 700;
      font-size: 0.6rem;
      color: #ffd700;
      margin-left: 0.1rem;
      position: relative;
    }

    // 100%标签样式
    .float-percent-box {
      position: absolute;
      top: -0.5rem;
      right: -0.86rem;
      border-radius: 1rem;
      width: 1.4rem;
      height: 0.6rem;

      .float-percent {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 0.28rem;
        color: #fff;
        top: 0.08rem;
        left: 0.24rem;
      }

      .float-svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  // ==================== 卡片游戏区域样式 ====================
  .card-game {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    justify-items: center;
    box-sizing: border-box;
    margin: 0.7rem auto;

    .card {
      width: 1.72rem;
      height: 2.3rem;
      position: relative;

      // 图片层样式
      .img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        // GIF动画层
        &.img-gif {
          z-index: 11;
          transform: scale(1.046, 1.2);
        }

        // 已领取状态层
        &.img-res {
          z-index: 11;

          span {
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            top: 1.3rem;
            color: #ffd700;
            font-size: 0.32rem;
          }
        }

        // 基础状态层
        &.img-bs {
          z-index: 10;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      // 禁用状态样式
      &.disabled .img-bs {
        opacity: 0.4;
      }

      // 激活状态样式（金色边框动画）
      &.active .img-bs {
        box-shadow: 0 0 0.3rem 0.1rem #ffba00;
        animation: active 2s infinite;
      }

      // 金色边框闪烁动画
      @keyframes active {
        0% {
          box-shadow: 0 0 0.3rem 0.1rem #ffba00;
        }
        50% {
          box-shadow: 0 0 0.3rem 0rem #ffba00;
        }
        100% {
          box-shadow: 0 0 0.3rem 0.1rem #ffba00;
        }
      }
    }
  }

  // ==================== 任务区域样式 ====================
  .tarefa {
    margin-top: 0.4rem;

    .tit {
      font-size: 0.34rem;
      margin-bottom: 0.2rem;
    }

    .el-progress_box {
      margin-top: 0.1rem;
    }

    .text {
      font-size: 0.3rem;
      margin-bottom: 0.45rem;
      margin-top: 0.2rem;
      display: flex;
      justify-content: space-between;
      color: #ffc2fc;

      .amount {
        color: #ffba00;
      }
    }
  }
}

// ==================== 进度条组件样式 ====================
.el-progress {
  align-items: center;
  display: flex;
  line-height: 1;
  position: relative;

  &-bar {
    box-sizing: border-box;
    flex-grow: 1;

    // 进度条外层
    &__outer {
      background-color: var(--el-border-color-lighter);
      border-radius: 1rem;
      overflow: hidden;
      position: relative;
      vertical-align: middle;

      .el-progress_box & {
        background: #47304e;
        height: 0.16rem !important;
      }
    }

    // 进度条内层
    &__inner {
      background-color: #ffba00;
      border-radius: 1rem;
      height: 100%;
      left: 0;
      line-height: 1;
      position: absolute;
      text-align: right;
      top: 0;
      transition: width 0.6s ease;
      white-space: nowrap;

      .el-progress_box .el-progress-bar__outer & {
        background-color: var(--theme-dec4) !important;
      }

      &:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
    }
  }

  // 无文本模式
  &--without-text .el-progress-bar {
    display: block;
    margin-right: 0;
    padding-right: 0;
  }

  // 最后一个进度条的文本样式
  &:last-child .text {
    margin-bottom: 0;
  }
}
</style>
